import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Image } from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import close_img from '../../../assets/icon_close.png'
import './index.scss'

class ModalTop extends Component {

	static propTypes = {
		isOpened: PropTypes.bool,
		title: PropTypes.string,
		cls: PropTypes.string,
		children: PropTypes.any,
		renderFooter: PropTypes.any,
		onClose: PropTypes.func
	}

	static defaultProps = {
		isOpened: false,
		title: '选择状态',
	}

	render(){
		const { isOpened, title, cls} = this.props
		return(
			<AtModal 
        className={`custom-top-modal ${cls || ''}`}
        isOpened={isOpened}
        closeOnClickOverlay
				onClose={this.closeModal}
      >
        <AtModalHeader>
					<View className='custom-modal-header'>
						<View className='custom-modal-header-title'>{title}</View>
						
					</View>
				</AtModalHeader>
        <AtModalContent className='modal-content'>
          <View className='modal-content-children'>
						{this.props.children}
          </View>
          <View className='modal-content-btns'>
						{this.props.renderFooter}
          </View>
        </AtModalContent>
      </AtModal>
		)
	}

	closeModal = () => {
		const { onClose } = this.props
		onClose && onClose()
	}
}

export default ModalTop